<template>
  <div class="wrapper">
    <mt-header :title="`${userInfo && userInfo.payPassword=='1'?'设置':'修改'}支付密码`" class="no-bg">
      <mt-button icon="back" slot="left" @click="goback()"></mt-button>
      <mt-button slot="right" @click="goback()">
        <i class="icon iconfont icon-guanbi"></i>
      </mt-button>
    </mt-header>
    <div class="blank">支付密码仅支持6位数字</div>
    <div v-if="userInfo && userInfo.payPassword=='1'">
      <div class="list">
        <inputPayPwd @sendValueToParent="getPayPwdFromChild"></inputPayPwd>
        <inputPayPwd title="确定支付密码" @sendValueToParent="getPayPwdFromChildAgain"></inputPayPwd>
      </div>
      <div class="default-btn">
        <mt-button type="primary" size="large" :disabled="(inputValuePayPwd&&inputValuePayPwdAgain)?false:true" @click.native="editPayPwd">完成</mt-button>
      </div>
    </div>
    <div v-else>
      <div class="list">
        <inputPayPwd title="原支付密码" @sendValueToParent="getOldPwdPwdFromChild"></inputPayPwd>
        <inputPayPwd title="输入新支付密码" @sendValueToParent="getPayPwdFromChild"></inputPayPwd>
        <inputPayPwd title="重新输入新支付密码" @sendValueToParent="getPayPwdFromChildAgain"></inputPayPwd>
      </div>
      <div class="default-btn">
        <mt-button type="primary" size="large" :disabled="(inputValuePayPwd&&inputValuePayPwdAgain&&inputValueOldPayPwd)?false:true" @click.native="editPayPwd">完成</mt-button>
      </div>
      <div class="tips" @click="changeToFindPayPwd">忘记密码</div>
    </div>
  </div>
</template>

<script>
import inputPayPwd from "@/components/InputPayPwd/index"
import { Toast } from 'mint-ui';
import { mapGetters } from 'vuex'
export default {
  data: function () {
    return {
      inputValuePayPwd:'',
      inputValuePayPwdAgain:'',
      inputValueOldPayPwd:''
    }
  },
  components:{
    inputPayPwd
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    goback(){
      if( this.$route.query.from == 'usable' ){
        this.$router.push('/account/wallet/usable');
      }else{
        this.$router.back(-1)
      }
    },
    getOldPwdPwdFromChild(value){
      this.inputValueOldPayPwd = value;
    },
    getPayPwdFromChild(value){
      this.inputValuePayPwd = value;
    },
    getPayPwdFromChildAgain(value){
      this.inputValuePayPwdAgain = value;
    },
    editPayPwd(){
      if( this.inputValuePayPwdAgain == this.inputValuePayPwd ){
        var data = {}
        if( this.userInfo && this.userInfo.payPassword=='1' ){
          // 未设置
          data = {
            "payPassword":this.inputValuePayPwd
          }
        }else{
          // 已设置
          data = {
            "payPasswordOld":this.inputValueOldPayPwd,
            "payPassword":this.inputValuePayPwd
          }
        }
        this.$store.dispatch('UpdateInfo',data).then((res) => {
          if( res.code == 200 ){
            Toast({
              message: "已设置",
              iconClass: 'icon iconfont icon-ic_check'
            })
            if( this.$route.query.from == 'Usable' ){
              this.$router.back(-1)
            }else{
              this.$router.push('/account/setting');
            }
          }else{
            Toast({
              message: res.msg,
              iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
            });
          }
        })
      }else{
        Toast({
          message: '两次输入密码不一致'
        });
      }
    },
    changeToFindPayPwd(){   //跳转到找回支付密码页面
        if( this.userInfo.loginFlag == '1' ){
            // 未设置支付密码，请先设置支付密码
            Toast({
                message: "请先设置登录密码",
                iconClass: 'icon iconfont icon-ic_check'
            })
        }else{
            this.$router.push('/account/setting/editPayPwd/findPayPwd');
        }
    }
  },
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .blank{
        height:44px;
        background:rgba(242,243,249,1);
        font-size:13px;
        color:#bfbfbf;
        line-height 44px;
        text-align:center;
    }
    .list{
        color:#666666;
    }
    .tips{
        font-size:12px;
        color:#0055A4;
    }
}
</style>
